<script setup lang="ts">
/*const user_accout = ref("")
const user_password = ref("")

const formData = reactive({
    accout:user_accout.value,
    password:user_password.value
})*/
import {postBtnStringOne} from "../hooks/postSubmit"

//发送的表单数据中的字段要与服务接收的字段一直不然，存入mongodb数据库中的是空的数据
const formData = reactive({
    name: "用户名",
    account:"",
    password:""
})

const deleteUserID = reactive({
    userID:""
})

const updateUserName = reactive({
    id:"",
    name:""
})
const submitBtn = async() => {
    fetch('/api/addUser',{
        method: 'POST',
        body: JSON.stringify(formData), // 或使用new FormData(form)来序列化表单数据
        headers: {
            'Content-Type': 'application/json' // 根据发送的数据类型调整头部
        }
    }).then(async res=>{return res.json()}).then(async data => {
        console.log(data)
    }).catch(error=>console.log(error))
}
const deleteUserIDBtn = async() => {
    fetch("/api/deleteUser",{
        method: 'POST',
        body: JSON.stringify(deleteUserID), 
        headers: {
            'Content-Type': 'application/json' // 根据发送的数据类型调整头部
        }
    }).then(async res=>{return res.json()}).then(async data1 => {
        console.log(data1)
    }).catch(error=>console.log(error))
}

function updateUserNameBtn(){
    fetch('/api/updateUser',{
        method:"POST",
        body: JSON.stringify(updateUserName),
        headers:{
            'Content-Type': 'application/json'
        }
    }).then(res=>{return res.json()}).then(async (data:any)=>{
        console.log(data)
    }).catch(err=>console.log(err))
}
</script>

<template>
    <div>
        <h3>表单测试</h3>
        <input type="text" placeholder="账号" v-model="formData.account"/><br />
        <input type="password" placeholder="密码" v-model="formData.password"/><br />
        <button @click="submitBtn">提交</button>
        <hr />
        <h3>删除用户</h3>
        <input type="text" v-model="deleteUserID.userID" placeholder="需要删除用户的ID">
        <button @click="deleteUserIDBtn">删除用户</button>
        <hr />
        <h3>更改用户</h3>
        <input type="text" v-model="updateUserName.id" placeholder="修改用户的ID"/><br />
        <input type="text" v-model="updateUserName.name" placeholder="修改用户姓名"/><br />
        <button @click="updateUserNameBtn">更改用户姓名</button>
    </div>
</template>

<style scoped>

</style>
